<template>
  <div class="dt-guide" v-if="currStep > -1" :style="styleRect.outer">
    <div class="dt-guide-filter"></div>
    <div class="dt-guide-rect" :style="styleRect.inner">
      <div class="dt-guide-card" :style="styleCard">
        <!-- <i class="dt-card-finger" v-if="steps[currStep].isGif" :style="styleFinger"></i> -->
        <PublicLottieAnimation :animationPath="'/skb/img/guide/finger.json'" class="dt-card-finger" v-if="steps[currStep].isGif" :style="styleFinger" />
        <i class="dt-card-triangle" :class="triCalss"></i>
        <i class="el-icon-close" @click="closeGuid"></i>
        <div class="dt-card-con">
          <h4>{{ steps[currStep].title }}</h4>
          <p>{{ steps[currStep].description }}</p>
        </div>
        <div class="dt-card-btn" v-if="steps[currStep].isBtn">
          <el-button size="mini" @click="goPrev">上一步</el-button>
          <el-button type="primary" size="mini" @click="goNext">下一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['currStep', 'demoPid'],
  data() {
    return {
      steps: [
        {
          index: 0,
          title: '创建项目',
          description: '点击创建项目按钮，可创建您的项目',
          isBtn: true,
          selector: '.dt-create-pm',
          type: 'bottom-end',
          offLeft: -240, //提示框偏移
          offTop: 55,
          prev: () => {
            this.$root.$emit('guide-to-start')
          },
          next: () => {
            this.$root.$emit('guide-to-1')
          }
        },
        {
          index: 1,
          title: '项目名称',
          description: '点击卡片，开始管理您的项目',
          isGif: true,
          selector: '.dt-content-project-card .dt-content-project-badge:eq(0)',
          type: 'bottom-start',
          offLeft: 100,
          offTop: 300
        },
        {
          index: 2,
          title: '项目详情',
          description: '这里主要介绍项目的基本情况，包括项目概况、工作内容、项目成员表',
          isBtn: true,
          selector: '.dt-content-page',
          type: 'left-center',
          offLeft: -345,
          offTop: 430,
          prev: () => {
            this.$router.push('/main/#/pm?tab=list&elTab=0', () => {
              var timer = setInterval(() => {
                //新手引导,跳转后等待dom加载完毕再进行回调
                if ($('.dt-content-project-card .dt-content-project-badge:eq(0)')[0]) {
                  clearInterval(timer)
                  this.$root.$emit('guide-to-1')
                }
              }, 50)
            })
          },
          next: () => {
            this.$root.$emit('guide-to-3')
          }
        },
        {
          index: 3,
          title: '项目群列表',
          description: '这里展示项目各个生产节点沟通群，为成员提供沟通平台',
          isBtn: true,
          selector: '.dt-chat-groups',
          type: 'right-start',
          offLeft: 300,
          offTop: 200,
          prev: () => {
            this.$root.$emit('guide-to-2')
          },
          next: () => {
            this.$root.$emit('guide-to-4')
          }
        },
        {
          index: 4,
          title: '项目群',
          description: '点击群名称，进入群聊',
          isGif: true,
          selector: '.dt-chat-groups .dt-list-item:eq(0)',
          type: 'bottom-start',
          offLeft: 100,
          offTop: 138
        },
        {
          index: 5,
          title: '审批',
          description: '点击审批按钮，可以在群内发起审批',
          isBtn: true,
          selector: '.dt-chat-content-int .dt-icon-shenpi',
          type: 'top-center',
          offLeft: -150,
          offTop: -150,
          prev: () => {
            this.$router.push('/main/#/pm?tab=detail&elTab=0&rootProjectId=' + this.query.rootProjectId, () => {
              var timer = setInterval(() => {
                //新手引导,跳转后等待dom加载完毕再进行回调
                if ($('.dt-chat-groups .dt-list-item:eq(0)')[0]) {
                  clearInterval(timer)
                  this.$root.$emit('guide-to-4')
                }
              }, 50)
            })
          },
          next: () => {
            this.$root.$emit('guide-to-6')
          }
        },
        {
          index: 6,
          title: '添加成员',
          description: '点击按钮，可以邀请其他成员进群',
          isBtn: true,
          selector: '.dt-member-opera img',
          type: 'bottom-end',
          offLeft: -280,
          offTop: 45,
          prev: () => {
            this.$root.$emit('guide-to-5')
          },
          next: () => {
            this.$root.$emit('guide-to-7')
          }
        },
        {
          index: 7,
          title: '组织架构',
          description: '点击组织架构，快速了解项目的组织架构情况',
          isGif: true,
          selector: '#tab-1',
          type: 'bottom-start',
          offLeft: 25,
          offTop: 120
        },
        {
          index: 8,
          title: '组织架构',
          description: '点击加号，可以添加管理单位、合作单位、专业，专业必须添加在管理单位后面哦',
          isBtn: true,
          selector: '.dt-org-self-root > .dt-org-add',
          type: 'bottom-start',
          offLeft: -27,
          offTop: 45,
          prev: () => {
            this.$router.push('/main/#/pm?tab=detail&elTab=5&rootProjectId=' + this.query.rootProjectId + '&groupId=' + this.query.groupId, () => {
              var timer = setInterval(() => {
                //新手引导,跳转后等待dom加载完毕再进行回调
                if ($('#tab-1')[0]) {
                  clearInterval(timer)
                  this.$root.$emit('guide-to-7')
                }
              }, 50)
            })
          },
          next: () => {
            this.$root.$emit('guide-to-9')
          }
        },
        {
          index: 9,
          title: '组织架构',
          description: '点击生产人员，可以查看生产任务统计表',
          isGif: true,
          selector: '.is-last-child:eq(0)',
          type: 'bottom-center',
          offLeft: -5,
          offTop: 259,
          finLeft: 125
        },
        {
          index: 10,
          title: '生产人员统计',
          description: '查看生产任务统计列表，可以快速掌握项目成员任务完成情况',
          isBtn: true,
          selector: '.el-drawer',
          type: 'left-center',
          offLeft: -350,
          offTop: 470,
          prev: () => {
            this.$root.$emit('guide-to-9')
          },
          next: () => {
            this.$root.$emit('guide-to-11')
          }
        },
        {
          index: 11,
          title: '项目节点',
          description: '点击查看项目节点，了解项目生产各个节点生产情况',
          isGif: true,
          selector: '#tab-2',
          type: 'bottom-start',
          offLeft: 30,
          offTop: 119
        },
        {
          index: 12,
          title: '项目节点',
          description: '这里显示项目的生产节点，包括各节点负责人、工期、进度、权重',
          isBtn: true,
          selector: '.dt-node-dd',
          type: 'bottom-center',
          offLeft: 610,
          offTop: 170,
          prev: () => {
            this.$router.push('/main/#/pm?tab=detail&elTab=1&rootProjectId=' + this.query.rootProjectId, () => {
              //与加载dom无关的可以直接跳转
              this.$root.$emit('guide-to-11')
            })
          },
          next: () => {
            this.$root.$emit('guide-to-13')
          }
        },
        {
          index: 13,
          title: '项目节点',
          description: '请点击生产节点，查看节点内任务',
          isGif: true,
          selector: '.dt-node-dd .dt-node-item:eq(0)',
          type: 'bottom-center',
          offLeft: -30,
          offTop: 192,
          finLeft: 110
        },
        {
          index: 14,
          title: '任务详情',
          description: '请点击列表内数据，查看任务详情',
          isGif: true,
          selector: '.custom-table .el-table',
          type: 'bottom-center',
          offLeft: 610,
          offTop: 370,
          finLeft: 110
        },
        {
          index: 15,
          title: '任务详情',
          description: '这里详细展示了任务信息，并可以查看审批记录、变更记录',
          isBtn: true,
          selector: '.el-dialog',
          type: 'left-center',
          offLeft: -345,
          offTop: 430,
          prev: () => {
            this.$root.$emit('guide-to-14')
          },
          next: () => {
            this.$root.$emit('guide-to-16')
          }
        },
        {
          index: 16,
          title: '项目资料',
          description: '请点击项目资料，查看项目内资料',
          isGif: true,
          selector: '#tab-3',
          type: 'bottom-start',
          offLeft: 30,
          offTop: 120
        },
        {
          index: 17,
          title: '项目资料',
          description: '根据项目节点自动创建文件夹，任务资料、群内发送的资料会自动存储在这里',
          isBtn: true,
          selector: '.el-table__body',
          type: 'bottom-center',
          offLeft: 605,
          offTop: 230,
          prev: () => {
            this.$router.push('/main/#/pm?tab=detail&elTab=2&rootProjectId=' + this.query.rootProjectId, () => {
              //与加载dom无关的可以直接跳转
              this.$root.$emit('guide-to-16')
            })
          },
          next: () => {
            this.$root.$emit('guide-to-18')
          }
        },
        {
          index: 18,
          title: '项目任务',
          description: '请点击项目任务，查看项目内所有任务',
          isGif: true,
          selector: '#tab-4',
          type: 'bottom-start',
          offLeft: 30,
          offTop: 120
        }
      ],
      clientRect: {}
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    },
    styleRect() {
      var rectLeft = 0 //镂空区域偏移
      switch (this.currStep) {
        case 9:
          rectLeft = -60
          break
        case 18:
          rectLeft = 10
      }

      var polygon =
        '0 0,' +
        (this.clientRect.left - 5 + rectLeft) +
        'px ' +
        (this.clientRect.top - 5) +
        'px,' +
        (this.clientRect.right + 5 + rectLeft) +
        'px ' +
        (this.clientRect.top - 5) +
        'px,' +
        (this.clientRect.right + 5 + rectLeft) +
        'px ' +
        (this.clientRect.bottom + 5) +
        'px,' +
        (this.clientRect.left - 5 + rectLeft) +
        'px ' +
        (this.clientRect.bottom + 5) +
        'px,' +
        (this.clientRect.left - 5 + rectLeft) +
        'px ' +
        (this.clientRect.top - 5) +
        'px,' +
        '0 0,' +
        '0 100%,' +
        '100% 100%, ' +
        '100% 0,' +
        '0 0'
      return {
        outer: this.steps[this.currStep].isGif
          ? { 'clip-path': 'polygon(' + polygon + ')', 'background-color': 'rgba(0, 0, 0, 0.5)', transition: 'all 0.3s linear 0s' }
          : '',
        inner: this.steps[this.currStep].isGif
          ? ''
          : { 'clip-path': 'polygon(' + polygon + ')', 'background-color': 'rgba(0, 0, 0, 0.5)', transition: 'all 0.3s linear 0s' }
      }
    },
    styleCard() {
      return {
        left: this.clientRect.left + this.steps[this.currStep].offLeft + 'px',
        top: this.clientRect.top + this.steps[this.currStep].offTop + 'px'
      }
    },
    styleFinger() {
      return {
        left: this.steps[this.currStep].finLeft ? this.steps[this.currStep].finLeft + 'px' : '',
        top: this.steps[this.currStep].finTop ? this.steps[this.currStep].finTop + 'px' : ''
      }
    },
    triCalss() {
      return this.steps[this.currStep] ? this.steps[this.currStep].type : ''
    }
  },
  watch: {
    currStep(newVal, oldVal) {
      if (newVal !== oldVal) {
        setTimeout(() => {
          this.clientRect = this.steps[this.currStep] ? $(this.steps[this.currStep].selector)[0].getBoundingClientRect() : {}
        }, 50)
      }
    }
  },
  methods: {
    closeGuid() {
      this.$root.$emit('guide-to-close')
    },
    goPrev() {
      this.steps[this.currStep].prev()
    },
    goNext() {
      this.steps[this.currStep].next()
    }
  },
  mounted() {}
}
</script>
<style scoped>
.dt-guide {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.dt-guide-filter {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
}
.dt-guide-rect {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
}

.dt-guide-card {
  width: 292px;
  background-color: #fff;
  border-radius: 5px;
  padding: 16px;
  position: absolute;
  right: 13px;
  top: 144px;
  transition: all 0.3s linear 0s;
}
.dt-guide-card .dt-card-finger {
  width: 60px;
  height: 62px;
  position: absolute;
  /* background: url(/skb/img/guide/finger.gif) no-repeat scroll 0 0; */
  left: 5px;
  top: -70px;
}
.dt-guide-card .dt-card-triangle {
  width: 0;
  height: 0;
  position: absolute;
  border: 8px solid transparent;
}
.dt-guide-card .dt-card-triangle.bottom-end {
  right: 30px;
  top: -16px;
  border-bottom-color: #fff;
}
.dt-guide-card .dt-card-triangle.bottom-start {
  left: 30px;
  top: -16px;
  border-bottom-color: #fff;
}
.dt-guide-card .dt-card-triangle.left-center {
  right: -16px;
  top: 46%;
  border-left-color: #fff;
}
.dt-guide-card .dt-card-triangle.right-start {
  left: -16px;
  top: 46%;
  border-right-color: #fff;
}
.dt-guide-card .dt-card-triangle.top-center {
  left: 46%;
  bottom: -16px;
  border-top-color: #fff;
}
.dt-guide-card .dt-card-triangle.bottom-end {
  right: 30px;
  top: -16px;
  border-bottom-color: #fff;
}
.dt-guide-card .dt-card-triangle.bottom-center {
  left: 46%;
  top: -16px;
  border-bottom-color: #fff;
}
.dt-guide-card .el-icon-close {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
}
.dt-guide-card .el-icon-close:hover {
  color: #2f54eb;
}
.dt-card-con h4 {
  margin-bottom: 12px;
}
.dt-card-con p {
  line-height: 22px;
}
.dt-card-btn {
  text-align: right;
  margin-top: 16px;
}
</style>
